import React, { Component } from 'react'
// import store from '../../store/store';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import Actions from '../../store/actions'
import Item from '../Item';
export class List extends Component {
  constructor(props) {
    super(props)
    this.state = {}
    // console.log(this.props);
  }
  render() {
    const { todos } = this.props
    return (
      <ul className='todo-main'>
        {
          todos.map(todo => {
            return <Item key={todo.id} id={todo.id} name={todo.name} done={todo.done} />
          })
        }
      </ul>
    )
  }
}

// bind to App.props using map
const mapStateToProps = (state) => {
  return {
    ...state
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    actions: bindActionCreators(Actions, dispatch)
    // AddTodos: () => { dispatch(AddTodos) }

  }
};
export default connect(mapStateToProps, mapDispatchToProps)(List);